const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
// const browserSync = require('browser-sync')
// 自动创建一个开发服务器
// const bs = browserSync.create()

const data = {
  menus: [
    {
      name: 'Home',
      icon: 'aperture',
      link: 'index.html'
    },
    {
      name: 'Features',
      link: 'features.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
    {
      name: 'Contact',
      link: '#',
      children: [
        {
          name: 'Twitter',
          link: 'https://twitter.com/w_zce'
        },
        {
          name: 'About',
          link: 'https://weibo.com/zceme'
        },
        {
          name: 'divider'
        },
        {
          name: 'About',
          link: 'https://github.com/zce'
        }
      ]
    }
  ],
  pkg: require('./package.json'),
  date: new Date()
}

module.exports = grunt => {
    loadGruntTasks(grunt)

    grunt.initConfig({
        // 文件清理任务  grunt-contrib-clean
        clean: {
            // 清理的目标文件夹 
            temp: 'temp/',
            dist: 'dist/'
        },

        // CSS编译任务  grunt-sass  sass
        sass: {
            options: {
                 // 映射文件
                sourceMap: true,
                // 使用的编译模块
                implementation: sass
            },
            main: {
                // 目录展开属性
                expand: true,
                // 基准输出目录地址
                cwd: 'src',
                // 详细地址
                src: ['assets/styles/*.scss'],
                // 输入地址
                dest: 'temp/',
                // 后缀扩展名
                ext: '.css'
            }
        },
        // JS编译任务  grunt-babel  @babel/core @babel/preset-env
        babel: {
            // 定义配置文件
            options: {
                // 开启sourceMap文件
                sourceMap: true,
                presets: ['@babel/preset-env']
            },
            // 定义个目标
            main: {
                expand: true,
                cwd: 'src',
                src: ['assets/scripts/*.js'],
                dest: 'temp/'
            }
        },
        // 网页编译任务 grunt-web-swig
        web_swig: {
            options: {
                swigOptions: {
                  // 设置不缓存 防止模板缓存导致页面不能及时更新
                    cache: false
                },
                getData: function(tpl) {
                  // 模板内的对应数据
                    return data
                }
            },
            main: {
                expand: true,
                cwd: 'src',
                src: ['**/*.html'],
                dest: 'temp/'
            }
        },
        // 图片 字体压缩 grunt-contrib-imagemin
        imagemin: {
            options: {
              // 图片优化、压缩级别
              optimizationLevel: 2
            },
            main: {
                files: [{
                    expand: true,
                    cwd: 'src',
                    src: ['assets/images/*.png'],
                    dest: 'dist/'
                }]
            },
            fonts: {
              files: [{
                expand: true,
                cwd: 'src',
                src: ['assets/fonts/*.{svg,eot,ttf,woff}'],
                dest: 'dist/'
              }]
            }
        },
        // 其他公共文件拷贝  grunt-contrib-copy
        copy: {
          main: {
            files: [{
              expand: true,
              cwd: 'public/',
              src: ['**'],
              dest: 'dist/'
            }]
          }
        },
        // HTML文件引用处理 grunt-useref   在源文件上进行处理 不改变文件路径
        // 该插件包含grunt-css  grunt-contrib-uglify  grunt-contrib-concat
        useref: {
          html: 'temp/**/*.html',
          temp: 'temp/output'
        },
        // 编译构建注释中的文件  grunt-contrib-concat
        concat: {
          main: {
            files: {
              'temp/assets/styles/vendor.css': ['node_modules/bootstrap/dist/css/bootstrap.css'],
              'temp/assets/scripts/vendor.js': ['node_modules/jquery/dist/jquery.js', 'node_modules/popper.js/dist/umd/popper.js', 'node_modules/bootstrap/dist/js/bootstrap.js']
            }
          }
        },
        // 压缩CSS  grunt-contrib-css
        cssmin: {
          main: {
            files: [{
              expand: true,
              cwd: 'temp',
              src: ['assets/styles/*.css'],
              dest: 'dist'
            }]
          }
        },
        // 压缩JS  grunt-contrib-uglify
        uglify: {
          main: {
            expand: true,
            cwd: 'temp',
            src: ['assets/scripts/*.js'],
            dest: 'dist'
          }
        },
        // 压缩html grunt-contrib-htmlmin
        htmlmin: {
          main: {
            options: {
              collapseWhitespace: true,
              minifyCSS: true,
              minifyJS: true
            },
            files: [{
              expand: true,
              cwd: 'temp',
              src: ['**/*.html'],
              dest: 'dist'
            }]
          }
        },
        // 监听文件变化任务 grunt-contrib-watch
        watch: {
          options: {
            // 热部署监听  connect-livereload 
            livereload: true
          },
          css: {
            // 监视文件
            files: ['src/assets/styles/*.scss'],
            // 文件改变时执行的任务
            tasks: ['sass']
          },
          js: {
            // 监视文件
            files: ['src/assets/scripts/*.js'],
            // 文件改变时执行的任务
            tasks: ['babel']
          },
          html: {
            // 监视文件
            files: ['src/**/*.html'],
            // 文件改变时执行的任务
            tasks: ['web_swig']
          },
          other: {
            // 监视静态文件
            files: ['src/assets/images/**', 'src/assets/fonts/**', 'public/**'],
            // 文件改变时执行的任务
            tasks: []
          }
        },
        // 热部署服务器 grunt-browser-sync
        browserSync: {
          bsFiles: {
            src: 'temp/**/*'
          },
          options: {
            watchTask: true,
            notify: false,
            // 端口
            port: 3050,
            // 默认打开
            open: true,
            server: {
              // 运行文件夹
              baseDir: ['temp', 'src', 'public'],
              // 配置映射， routed 高于 baseDir
              routes: {
                // 将 /node_modules 映射到工程下的node_modules
                '/node_modules': 'node_modules'
              },
              keepalive: false
            }
          }
        }
        // grunt使用的热部署静态服务器 grunt-contrib-connect 
        // 这里没办法将路由做映射，只能从根目录打开  
        // connect: {
        //   server: {
        //     options: {
        //       base: '.',
        //       port: 3050,
        //       keepalive: true,
        //       livereload: true,
        //       open: true
        //     }
        //   }
        // }
    })

    // 热部署服务器 browser-sync  但是不能与监听任务同时使用
    // grunt.registerTask('serve', function(){
    //   // 服务器为异步事件 启动异步
    //     const done = this.async()
    //     bs.init({
    //       notify: false,
    //       port: 3050,
    //       server: {
    //         baseDir: ['temp', 'src', 'public'],
    //         routes: {
    //           '/node_modules': 'node_modules'
    //         }
    //       }
    //     })
    // })


    // 组合编译CSS、JS、HTML任务 
    grunt.registerTask('compile', ['sass', 'babel', 'web_swig'])

    // 构建任务以及压缩任务整合 项目上线前执行
    // 先清理文件-clean 然后编译文件-compile 构建注释以及文件生成-useref/concat 压缩文件-cssmin/uglify/htmlmin  压缩图片、字体-imagemin  拷贝公共文件-copy
    grunt.registerTask('build', ['clean', 'compile', 'useref', 'concat', 'uglify', 'cssmin', 'htmlmin', 'imagemin', 'copy'])

    // 开发任务用于测试
    grunt.registerTask('develop', ['compile','browserSync','watch' ])
}